<template>
	<div class="teachVideo">
		<div class="teach_h classIndex_h clear">
			<router-link to="/teach/video/index">我的视频</router-link>
			<strong><i>></i>视频提问</strong>
		</div>
		<!--  -->
		<div class="teachVideo_ch">
			<label>
				<input type="radio" name="answer">
				<span @click="Allquestion(0)">未回答(<i>{{ no_answer_count }}</i>)</span>
			</label>
			<label>
				<input type="radio" name="answer">
				<span @click="Allquestion(1)">已回答(<i>{{ answer_count }}</i>)</span>
			</label>
			<label>
				<input type="radio" name="answer" checked>
				<span @click="Allquestion(-1)">全部(<i>{{ all_count }}</i>)</span>
			</label>
		</div>
		<!--  -->
		<ul v-loading="loading">
			<li class="teachVideo_ls clear" v-for="(item, index) in commentList" :key="item.videoid">
				<a @click="openClass(item.videoid)" class="teachVideo_lsl fl box">
					<img :src="BASE_URL +'/'+ item.video_image" :onerror="errorImg">
				</a>
				<div class="teachVideo_lsr">
					<div class="teachVideo_lsr1 clear">
						<a @click="openClass(item.videoid)">
							<span>提问：</span>{{item.content}}
						</a>
						<div class="teachVideo_lsr1_r fr">
							<el-popover placement="bottom" width="" popper-class="ioperation_hover" trigger="hover">
								<ul class="r_ioperation">
									<li @click="removeList(item.id)">删除</li>
								</ul>
								<i slot="reference" class="el-icon-arrow-down"></i>
							</el-popover>
						</div>
					</div>
					<!--  -->
					<div class="teachVideo_lsr4">
						<span>节点：{{item.video_type_time}}</span>
					</div>
					<!-- 3 -->
					<div class="teachVideo_lsr5 clear">
						<span>{{item.user_name}} <i>{{item._create_time}}</i></span>
						<el-button class="fr" type="primary" v-if='$store.getters.userInfo.check_rolebaseid != 4' @click="questionAnswering(item.id)">回复</el-button>
					</div>
				</div>
				<!--  -->
				<ul>
					<template v-if="typeof(item.answer) != 'undefined'">
						<li class="classTeest_PlS" v-for="(item2, index2) in item.answer" :key="index2">
							<div class="classTeest_box clear">
								<div class="classTeest_PlS_l fl clear">
									<a><img :src="BASE_URL+ item2.avatar_path"></a>
									<div class="classTeest_PlS_lt">
										<div><a>{{item2.user_name}}</a></div>
										<div>
											<span>{{item2._create_time}}</span>
										</div>
									</div>
								</div>
								<!--  -->
								<div class="classTeest_PlS_r box fl" v-html="item2.content"></div>
								<span class="el-icon-delete fr" @click="video_question_answer(item2.id)" v-if="item2.create_id == $g.user_id"></span>
								<i class="ipm banjiquan_pinglun fr" @click="commentShow(index)" v-if="item2.create_id != $g.user_id"></i>
							</div>
						</li>
					</template>
				</ul>
				<div class="teach-open" v-if="0">
					<span>展开更多</span>
				</div>
				<!-- 回复 -->
				<transition name="el-fade-in-linear">
					<div class="classTeest_rTx" v-show="commentTxT && item.showInput">
						<div class="classTeest_rPT">
							<el-input type="textarea" :rows="5" resize="none" maxlength="140" placeholder="请输入内容" v-model="commentVal">
							</el-input>
							<span><i>{{commentVal.length}}</i>/140</span>
						</div>
						<div class="classTeest_rPB">
							<el-button type="primary" plain @click="commentHide(index)">取消</el-button>
							<el-button type="primary" @click="comment(item.id)">保存</el-button>
						</div>
					</div>
				</transition>
			</li>
		</ul>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<!--  -->
		<el-dialog title="回答" :visible.sync="answerViews" width="800px" custom-class="answerViews" :close-on-click-modal="false" @close='resetForm("ruleForm")'>
			<div class="answerCont">
				<template v-for="(list, index) in answeringMsg">
					<div class="answerCont_h">
						<router-link to="###">
							<img :src="BASE_URL+ list.avatar_path">
						</router-link>
						<span>{{list.user_name}}</span>
					</div>
					<div class="answerCont_TxT">
						<p class="answerCont_TxT_h">{{list.content}}</p>
						<div class="answerCont_TxT_m">
							<img :src="BASE_URL  +'/'+ list.video_image" :onerror="errorImg">
						</div>
						<p class="answerCont_time">{{list._create_time}}</p>
					</div>
				</template>
				<!--  -->
				<div class="">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item prop="desc" label-width="0">
							<el-input type="textarea" :rows="8" resize="none" maxlength="500" placeholder="请输入回答的内容" v-model.tirm="ruleForm.desc"></el-input>
							<span class="numberWord"><i>{{ ruleForm.desc.length }}</i>/500</span>
						</el-form-item>
						<el-form-item class="buttonCSS">
							<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
							<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			id: '',
			videoid: this.$route.query.id,
			/*视频id*/
			answerViews: false, //回答弹窗
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: 0, //分页总数
			commentList: [],
			/*数据列表*/
			all_count: 0,
			/*全部*/
			answer_count: 0,
			/*已回答*/
			no_answer_count: 0,
			/*未回答*/
			qstate: -1,
			/*筛选状态*/
			answeringMsg: [],
			/*回复的数据信息*/
			commentVal: '',
			/*回复框*/
			commentTxT: false,
			placeholder: false,
			ruleForm: { desc: '' },
			rules: {
				desc: [
					{ required: true, message: '请输入回答的内容', trigger: 'change' },
				]
			},
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
			loading: true,
		}
	},
	created() {

		this.getVideoQuestionCount()
		this.getCommentList()
	},
	computed: {

	},
	methods: {
		/*
			跳转到公开课模块查看视频
		 */
		openClass(id) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${id}`
			window.open(link)
		},
		/**
		 * 提问数据的回复状态
		 * @DateTime 2020-03-06T09:08:51+0800
		 * @return   {[type]}                 [description]
		 */
		getVideoQuestionCount() {
			let success = (res => {
				let data = res.data;
				this.all_count = data.all_count
				this.answer_count = data.answer_count;
				this.no_answer_count = data.no_answer_count;
			});

			let params = {
				userid: this.$g.user_id,
				videoid: this.videoid
			}
			if (this.roleBaseid(4)) {
				this.$ajax.get('api/video/video_question_count', { params, func: { success: success} })
			} else {
				params.type = 1
				this.$ajax.get('api/video/video_question_count', { params, func: { success: success} })
			}


		},
		//评论信息
		getCommentList() {
			let success = (res => {
				let data = res.data;
				this.commentList = data.data;
				this.page_index = parseInt(data.page_index);
				this.total_number = data.data_sum;
				for (var i = 0; i < this.commentList.length; i++) {
					this.commentList[i].showInput = false;
				}

				this.loading = false;
				this.placeholder = this.commentList.length === 0 ? true : false

			});
			this.$ajax({
				url: 'api/video/video_question_list',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					type: 1,
					videoid: this.videoid,
					is_reply: this.qstate,
					page_index: this.page_index,
					page_size: this.page_size
				},
				func: {
					success: success
				}
			})
		},
		//全部问答
		Allquestion(res_stare) {
			this.qstate = res_stare
			this.getCommentList()
			this.getVideoQuestionCount()
		},
		change_page(val) {
			alert(val)
			this.page_size = val;
			this.getCommentList()
		},
		//表单验证
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

					let success = (res => {
						this.$message.success(res.msg);
						this.getCommentList()
						this.getVideoQuestionCount()
						this.answerViews = false;
						this.$refs[formName].resetFields();
					});
					this.$ajax({
						url: 'api/video/video_question_answer',
						method: 'post',
						data: {
							questionid: this.id,
							userid: this.$g.user_id,
							content: this.ruleForm.desc
						},
						func: { success: success }

					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.answerViews = false
			this.$refs[formName].resetFields();
		},
		//删除视频问题
		removeList(id) {
			this.$confirm('确认要删除此问答？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.getCommentList()
					this.getVideoQuestionCount()
				});
				this.$ajax({
					url: 'api/video/video_question',
					method: 'delete',
					params: {
						id: id,
						type: 2
					},
					func: { success: success }
				});
			}).catch(() => {});
		},
		//删除视频问答回复
		video_question_answer(id, question_id) {
			this.$confirm('确认要删除此回复吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.page_index = 1;
					this.getCommentList()
					this.getVideoQuestionCount()
				});
				this.$ajax({
					url: 'api/video/video_question_answer',
					method: 'delete',
					params: { id: id },
					func: { success: success }
				});
			}).catch(() => {});
		},
		//问答
		questionAnswering(id) {
			let success = (res => {
				let data = res.data;
				let arr = [];
				arr.push(data)
				this.answeringMsg = arr;
				this.answerViews = true;
				this.id = id
			});
			this.$ajax({
				url: 'api/video/video_question',
				method: 'get',
				params: { question_id: id },
				func: { success: success }
			})
		},
		commentShow(inx) {
			this.commentList[inx].showInput = true;
			this.commentTxT = true;
		},
		//
		commentHide(inx) {
			this.commentList[inx].showInput = false;
			this.commentTxT = false;
		},
		//
		comment(id) {
			let success = (res => {
				this.commentTxT = false;
				this.commentVal = '';
				this.getCommentList()
			});
			this.$ajax({
				url: 'api/video/video_question_answer',
				method: 'post',
				data: {
					questionid: id,
					userid: this.$g.user_id,
					content: this.commentVal
				},
				func: { success: success }

			})
		}
	}
}
</script>